vee-validate 表单验证

—-好记性不如烂笔头，掌握知识的最好方法莫过于把他记录下来

vee-validate
vee-validate 一个轻量级的 vue表单验证插件。

使用教程：

  • 1 安装：

    1
    npm install vee-validate --save

  • 2 使用 中文提示(按照教程捣鼓了，不行，自己摸索的写法。)
    main.js 添加

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import VeeValidate, {Validator}  from 'vee-validate';
import zh from 'vee-validate/dist/locale/zh_CN';

Validator.addLocale(zh);

const config = {
  locale: 'zh_CN'
};

Vue.use(VeeValidate,config);
  • 3使用
    第一个例子：
    1
    2
    3
    4
    5
    6
    7
    <div class="column is-12">
        <label class="label" for="email">Email</label>
        <p :class="{ 'control': true }">
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>

简化写，只看有用代码：

1
2
3
4
<p>
    <input v-validate="'required|email'" name="email" type="text" placeholder="Email">
    <span v-show="errors.has('email')"  >{{ errors.first('email') }}</span>
</p>

关于 提示：errors
==>errors.has(‘email’)
==>errors.first(‘email’)
这是什么玩意儿。莫急
直接输出 就可以看到，验证的时候返回的是个json数据

1
2
3
4
5
6
7
8
9
10
{
    "errors": [
        {
            "field": "email",
            "msg": " email 必须是有效的邮箱.",
            "rule": "email",
            "scope": "__global__"
        }
    ]
}

解释如下：
errors.first(‘field’) – 获取关于当前field的第一个错误信息
collect(‘field’) – 获取关于当前field的所有错误信息(list)
has(‘field’) – 当前filed是否有错误(true/false)
all() – 当前表单所有错误(list)
any() – 当前表单是否有任何错误(true/false)

tip：关于样式，在项目中可以根据需求选择，是使用自己的或者是现成的样式库（作者使用的是 Font Awesome）。

4 ok前方高能。最关心的莫过于自定义规则，或者修改规则
①：怎么修改默认的属性



这个是默认的，怎么自定义。。。
就是将 email 字段改为 邮箱或者随意字段。
方法一：

1
2
3
4
5
6
7
8
9
10
11
const dictionary = {
   zh_CN: {
    messages: {
      email: () => '这个邮箱有毒'
    },
     attributes:{
       email:'--邮箱--'
     }
  }
};
Validator.updateDictionary(dictionary);

提示语
为空时

方法二：
官方给出的自定义组件demo，前提是你定义了 custom-input

1
2
3
4
5
6
7
8
<div class="columns is-multiline">
    <div class="column is-12">
        <custom-input v-validate="'required|email'" data-vv-value-path="innerValue" data-vv-name="custom" label="Email" :has-error="errors.has('custom')">
        </custom-input>
        <span v-show="errors.has('custom')" class="help is-danger">{{ errors.first('custom') }}</span>
        <button @click="validate" type="button" class="button is-primary">Validate All</button>
    </div>
</div>

但是你可以忽略,有现成的input干嘛不用

1
2
3
4
<div >
    <input v-validate="'required|email'" data-vv-name="丫" label="Email" :has-error="errors.has('丫')" />
    <span v-show="errors.has('丫')" class="help is-danger">{{ errors.first('丫') }}</span>
</div>

ok，看效果

②增加自己的规则
添加手机号验证

1
2
3
4
5
6
7
8
Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必须是11位手机号码',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

1
2
<input v-validate="'required|phone'" name="phone" type="text" placeholder="Mobile">
<span v-show="errors.has('phone')" >{{ errors.first('phone') }}</span>

③当使用 required 规则验证时，输入为空时提示：xxx是必须的，真是要疯了。
如何修改：就一句话搞定

1
required:(field)=> "请输入"+field

其实就是覆盖他的规则，完整版：

1
2
3
4
5
6
7
8
9
10
11
12
13
const dictionary = {
  zh_CN: {
    messages:{
      //email: () => '这个邮箱有毒',
       ....
      required:(field)=> "请输入"+field
    },
    attributes: {
     ......
    }
  }
};
Validator.updateDictionary(dictionary);

看效果：

④官方提供了好多现成的规则 Rules

使用方法，

1
v-validate="'required|max:6|email'"

实现功能：
①required：为空时提示
②max:最多可以输入6个字符
③email:邮箱验证

当当当。现在使用到的基本用法。
待完善。

推荐阅读：

还是看官方文档吧 虽然英语这硬伤
文档：http://vee-validate.logaretm.com/localization.html
官方例子：http://vee-validate.logaretm.com/examples.html